Quasar is a popular Vue UI library for developing good looking Vue apps.
In this article, we’ll take a look at how to create Vue apps with the Quasar UI library.
Conditionally Display Table as Grid
The Quasar q-table‘s grid prop takes a boolean that lets us show the table as a grid conditionally.
For instance, we can write:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-table
title="Treats"
:data="data"
:columns="columns"
row-key="name"
:grid="$q.screen.xs"
>
</q-table>
</div>
</q-layout>
</div>
<script>
const columns = [
{
name: "name",
required: true,
label: "Dessert",
align: "left",
field: (row) => row.name,
format: (val) => `${val}`,
sortable: true
},
{
name: "calories",
align: "center",
label: "Calories",
field: "calories",
sortable: true
},
{ name: "fat", label: "Fat (g)", field: "fat", sortable: true },
{
name: "calcium",
label: "Calcium (%)",
field: "calcium",
sortable: true,
sort: (a, b) => parseInt(a, 10) - parseInt(b, 10)
}
];
const data = [
{
name: "Frozen Yogurt",
calories: 159,
fat: 6.0,
calcium: "14%"
},
{
name: "Ice cream sandwich",
calories: 237,
fat: 9.0,
calcium: "8%"
},
{
name: "Eclair",
calories: 262,
fat: 16.0,
calcium: "6%"
},
{
name: "Honeycomb",
calories: 408,
fat: 3.2,
calcium: "0%"
},
{
name: "Donut",
calories: 452,
fat: 25.0,
calcium: "2%"
},
{
name: "KitKat",
calories: 518,
fat: 26.0,
calcium: "12%"
}
];
new Vue({
el: "#q-app",
data: {
columns,
data
}
});
</script>
</body>
</html>
We set it to $q.screen.xs .
So when the screen hits the xs breakpoint, the content is displayed as a grid.
Export Table Data
Quasar comes with the Quasar.export method to let us export data from a table.
We can use it by writing the following:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-table
title="Treats"
:data="data"
:columns="columns"
row-key="name"
:grid="$q.screen.xs"
>
<template v-slot:top-right>
<q-btn
color="primary"
label="Export to csv"
no-caps
@click="exportTable"
>
</q-btn>
</template>
</q-table>
</div>
</q-layout>
</div>
<script>
const columns = [
{
name: "name",
required: true,
label: "Dessert",
align: "left",
field: (row) => row.name,
format: (val) => `${val}`,
sortable: true
},
{
name: "calories",
align: "center",
label: "Calories",
field: "calories",
sortable: true
},
{ name: "fat", label: "Fat (g)", field: "fat", sortable: true },
{
name: "calcium",
label: "Calcium (%)",
field: "calcium",
sortable: true,
sort: (a, b) => parseInt(a, 10) - parseInt(b, 10)
}
];
const data = [
{
name: "Frozen Yogurt",
calories: 159,
fat: 6.0,
calcium: "14%"
},
{
name: "Ice cream sandwich",
calories: 237,
fat: 9.0,
calcium: "8%"
},
{
name: "Eclair",
calories: 262,
fat: 16.0,
calcium: "6%"
},
{
name: "Honeycomb",
calories: 408,
fat: 3.2,
calcium: "0%"
},
{
name: "Donut",
calories: 452,
fat: 25.0,
calcium: "2%"
},
{
name: "KitKat",
calories: 518,
fat: 26.0,
calcium: "12%"
}
];
const wrapCsvValue = (val, formatFn) => {
let formatted = formatFn !== void 0 ? formatFn(val) : val;
formatted =
formatted === void 0 || formatted === null ? "" : String(formatted);
formatted = formatted.split('"').join('""');
return `"${formatted}"`;
};
new Vue({
el: "#q-app",
data: {
columns,
data
},
methods: {
exportTable() {
const content = [this.columns.map((col) => wrapCsvValue(col.label))]
.concat(
this.data.map((row) =>
this.columns
.map((col) =>
wrapCsvValue(
typeof col.field === "function"
? col.field(row)
: row[col.field === undefined ? col.name : col.field],
col.format
)
)
.join(",")
)
)
.join("rn");
const status = Quasar.exportFile(
"table-export.csv",
content,
"text/csv"
);
}
}
});
</script>
</body>
</html>
We convert each value to a CSV value with the wrapCsvValue function.
It wraps any value with spaces in quotes.
Then in the exportTable method, we call the wrapCsvValue to format the values.
Then we join each row object property together with commas.
And after that, we join the rows together.
Then we call Quasar.exportFile with the file name, content to save, and the MIME type of the file.
Conclusion
We can display our table conditionally as a grid.
Also, we can export the table content in the format we want with the exportFile method.
